<template>
	<view>
		<uni-list>
			<uni-list-item :show-extra-icon="true" :extra-icon="cloudIcon" title="云端保存" :switchChecked="switchChecked"
				:show-switch="true" @switchChange="switchChange">
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" :extra-icon="trashIcon" title="清除缓存" clickable @click="clearCache"
				:rightText="currentSize">
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" :extra-icon="emailIcon" title="转发邮箱" showArrow :rightText="targetEmail"
				clickable @click="navigateTo('target-email')">
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" :extra-icon="helpIcon" title="意见反馈" clickable
				@click="navigateTo('feedback')" showArrow>
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" :extra-icon="infoIcon" title="关于社区" clickable @click="navigateTo('about')"
				showArrow>
			</uni-list-item>
		</uni-list>

		<view class="flex align-center justify-center fixed-bottom" style="bottom: 200rpx;">
			<button type="primary" size="mini" @click="logout">退出登录</button>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message type="message" :message="title" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	computed
} from 'vue';

import {
	useStore
} from 'vuex';
import $U from '@/common/util.js';

const cloudIcon = reactive({
	size: 20,
	type: 'cloud-upload'
});
const trashIcon = reactive({
	size: 20,
	type: 'trash'
});
const emailIcon = reactive({
	size: 20,
	type: 'email'
});
const helpIcon = reactive({
	size: 20,
	type: 'help'
});
const infoIcon = reactive({
	size: 20,
	type: 'info'
});

const store = useStore();
const navigateTo = (path) => $U.navigateTo(path);

const switchChecked = computed((c) => store.state.cloud);

const clearCache = () => {
	uni.showModal({
		content: '清除缓存将会删除本地数据，确定要执行吗？',
		success: function (res) {
			if (res.confirm) {
				currentSize.value = '0.00KB';
				uni.removeStorageSync('sms');
				store.commit('setSms', []);
			} else if (res.cancel) {
				console.log('Cancel log out.');
			}
		}
	});
}

const logout = () => {
	uni.removeStorageSync('user');
	uni.removeStorageSync('token');
	uni.removeStorageSync('targetEmail');
	store.commit('setUser', {});
	store.commit('setToken', '');
	store.commit('setTargetEmail', '');
	$U.redirectTo('login');
}

const targetEmail = computed(() => {
	const {
		targetEmail,
		user
	} = store.state;
	return targetEmail ? targetEmail : user.email;
});
const currentSize = ref('');
const getStorageInfo = () => {
	const storageInfo = uni.getStorageInfoSync();
	const size = storageInfo.currentSize;
	currentSize.value = size > 1024 ? (size / 1024).toFixed(2) + 'MB' : size.toFixed(2) + 'KB';
}

const message = ref(null);
let title = ref('');
const switchChange = (e) => {
	const {
		value
	} = e;
	title = `您的短信数据将【${value ? '会' : '不会'}】保存在云端`;
	store.commit('setCloud', value);
	message.value.open();
}

onMounted(() => {
	getStorageInfo();
});
</script>

<style>

</style>
